<template>
  <a-card ref="card" size="small" :title="layoutData.title" :bodyStyle="{overflow:'auto',height: 'calc(100% - 37px)',padding:'0px 5px'}">
    <span slot="extra">
      <a href="javascript:;" v-if="layoutData.url" style="margin-right:5px;" @click="handleMore">more</a>
      <a-dropdown>
        <a class="ant-dropdown-link">
          <a-icon type="more"  />
        </a>
        <a-menu slot="overlay">
          <a-menu-item>
            <a href="javascript:;" @click="layoutItemRefresh">刷新</a>
          </a-menu-item>
          <a-menu-item v-if="edit">
            <a href="javascript:;" @click="layoutItemDelete">隐藏</a>
          </a-menu-item>
          <a-menu-item v-if="edit">
            <a href="javascript:;" @click="handleAdd">添加区块</a>
          </a-menu-item>
          <a-menu-item v-if="edit">
            <a href="javascript:;" @click="handleReset">恢复默认</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;" @click="handleEdit">{{edit?'退出编辑':'编辑区块'}}</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </span>
    <onl-graphreport-auto-chart
      v-if="layoutData.comp === 'OnlGraphreportAutoChart'"
      :code="layoutData.code"
      :hiddenTitle="true"
    >
    </onl-graphreport-auto-chart>
    <component v-else :is="layoutData.comp" :edit="edit"></component>
  </a-card>
</template>

<script>
import OnlGraphreportAutoChart from '@/views/modules/online/cggraphreport/auto/OnlGraphreportAutoChart'
import MyTaskList from './MyTaskList'
import MyApplyProcessList from './MyApplyProcessList'
import Notice from './Notice'
import OftenApply from './OftenApply'
import Meeting from './Meeting'
import OfficedocReceivedList from './OfficedocReceivedList'

// 引入相关的依赖
export default {
  name: 'HomePageCard',
  components: {
    OnlGraphreportAutoChart,
    MyTaskList,
    MyApplyProcessList,
    Notice,
    OftenApply,
    Meeting,
    OfficedocReceivedList
  },
  props: {
    layoutData: {
      type: Object,
      default: () => {}
    },
    i: {
      type: String,
      required: true
    },
    edit: {
      type: Boolean
    }
  },
  data() {
    return {
      chartData: [],
      head: {},
      key: new Date().getTime(),
      height: 0// 图表高度
    }
  },
  methods: {
    layoutItemDelete() {
      this.$emit('fn', 'delete', this.i)
    },
    handleAdd() {
      this.$emit('fn', 'add')
    },
    handleEdit() {
      // this.edit = !this.edit
      this.$emit('fn', 'edit')
    },
    layoutItemRefresh() {
      this.$emit('fn', 'refresh', this.i)
    },
    handleMore() {
      this.$router.push({ path: this.layoutData.url })
    },
    handleReset() {
      this.$emit('fn', 'reset')
    }
  }
}
</script>
<style>
.cssTransforms{
  /* transform: none !important;
  margin: 10px; */
}
</style>
<style scoped>
.vue-grid-item .ant-card{
  height: 100%;
}
.anticon{
  margin-left:10px ;
}
</style>
